<template>
	<view class="pageBox">
		<!--朋友圈详情-->

		<view class="cu-custom" :style="{ height: $wanlshop.wanlsys().height + 'px' }">
			<view
				class="cu-bar fixed bg-bgcolor"
				:style="{
					height: $wanlshop.wanlsys().height + 'px',
					paddingTop: $wanlshop.wanlsys().top + 'px',
					backgroundColor: common.appStyle.cart_nav_color ? common.appStyle.cart_nav_color : '#f7f7f7',
					backgroundImage: 'url(' + $wanlshop.oss( common.appStyle.cart_nav_image, 0, 50, 1, 'transparent', 'png' ) + ')',
					color: common.appStyle.cart_font_color == 'light' ? '#ffffff' : '#333333'
				}"
			>
				<view class="content" :style="{ top: $wanlshop.wanlsys().top + 'px' }">
					{{data.nickname}}
				</view>
				
				<view class="right">
					<image :src="data.avatar" class="search-icon"></image>
				</view>
			</view>
		</view>
		
		<view class="content">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange($event)">
					<swiper-item v-for="(swiper, index) in data.images" :key="index">
						<image :src="swiper" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view class="indicator">{{ data.current + 1 }}/{{ data.images ? data.images.length : 1 }}</view>
			</view>
			
			<view class="gray-dark padding-lr-bj padding-top-sm">
				<rich-text :nodes="data.content"></rich-text>
			</view>
			
			<!-- 底部 -->
			<view class="flex justify-between padding-bj align-center">
				<view class="flex align-center" @click="modalName=true">
					<image :src="data.avatar" class="avatar"></image>
					<text class="text-sm gray margin-left-bj">快来评论吧</text>
				</view>
				
				<view class="flex align-center">
					<view class="flex align-center" @tap="handleLike(data.id)">
						<image src="/static/images/like.png" v-if="!data.is_praise"  class="margin-right-xs comment"></image>
						<image src="/static/images/like_active.png" v-if="data.is_praise" class="margin-right-xs comment"></image>
						<text class="text-sm" :class="[data.is_praise? 'text-orange' : 'text-gray']">{{data.praisenum || 0}}</text>
					</view>
					
					<view class="flex align-center margin-left-bj" @click="modalName=true">
						<image src="/static/images/comment.png" class="margin-right-xs comment"></image>
						<text class="text-sm text-gray">{{total || 0}}</text>
					</view>
					
					<view class="flex align-center margin-left-bj" v-if="data.is_del"
					@tap="handleDelete(data.id)">
						<text class="wlIcon-yueduliang margin-right-xs"></text>
					</view>
				</view>
			</view>
		</view>
	
	
		
		<view class="" @tap.stop="">
			<view class="my-modal" style="padding-bottom: 0;">
				<view class="head padding-bj">
					<view class="content">
						<view class="text-lg">全部评论（{{total || 0}}）</view>
					</view>
				</view>
				
				<view class="text-left padding-lr-bj padding-bottom-bj">
					<comment
						:findId="find_id"
						:commentList="dataList"
						:commenCount="total"
						@complete="handleComplete"
						@scrolltolower="scrolltolower"
					/>
					
					<!-- 更多 -->
					<uni-load-more :status="status" :content-text="contentText" />
					
				</view>
			</view>
		</view>
	
	

		
	</view>
</template>

<script>
// import comment from '@/pages/new/components/comment/comment.vue';
import { mapState, mapActions } from 'vuex';
	
export default {
	components: {
		// comment
	},
	data() {
		return {
			modalName: true,
			data:{},
			find_id : 0,
			dataList:[],
			
			total:0,
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'noMore',//noMore loading
			contentText: {
				contentdown: '',
				contentrefresh: '正在加载...',
				contentnomore: ''
			}
		}
	},
	computed: {
		...mapState(['common'])
	},
	onLoad(options) {
		this.find_id = parseInt(options.id);
		this.getData();
		this.getList();
	},
	onShow(){
		
	},
	methods: {
		getList() {
			let that = this;
			this.status = 'loading';
			uni.request({
				url: '/friendscircle/commentlist',
				data: {
					page: this.current_page,
					id: this.find_id
				},
				success: res => {
					res = res.res;
					if (res.code === 1) {
						that.dataList = [...that.dataList, ...res.data.data];
						that.current_page = res.data.current_page; //当前页码
						that.last_page = res.data.last_page; //总页码
						that.status = 'more';
						that.total = res.data.total;
					}
				}
			});
		},
		async getData() {
			let that = this;
			uni.request({
				url: '/friendscircle/circleshow',
				data: {
					id: this.find_id
				},
				success: res => {
					res = res.res;
					if (res.code === 1) {
						this.data = res.data;
						this.data.current = 0;
					}
				}
			});
		},
		//轮播图指示器
		swiperChange(e) {
			this.data.current = e.detail.current;
		},
		// 关闭弹出层
		hideModal() {
			this.modalName = false;
		},
		handleComplete(){
			this.afferent = false;
			this.dataList = [];
			this.current_page = 1;
			this.getList();
			this.getData();
			//this.hideModal();
		},
		scrolltolower(){
			if (this.currentPage < this.lastPage) {
				this.currentPage += 1;
				this.getList();
			}
		},
		// 喜欢 & 取消喜欢
		async handleLike(id) {
			
			if (this.$store.state.user.isLogin) {
				uni.request({
					url: '/friendscircle/circlepraise',
					data: {
						id: this.data.id
					},
					success: res => {
						res = res.res;
						if (res.code === 1) {
							if(res.msg === '点赞成功'){
								this.data.praisenum += 1;
							}else{
								this.data.praisenum -= 1;
							}
							
							this.data.is_praise = res.msg === '点赞成功' ? true : false;
						}
					}
				});
			} else {
				this.$wanlshop.to('/pages/user/auth/auth');
			}
		},
		//删除
		handleDelete(id){
			if (this.$store.state.user.isLogin) {
				uni.showModal({
					content: "确认删除？",
					confirmText: '确认',
					success: (res)=> {
						if (res.confirm) {
							uni.request({
								url: '/friendscircle/circledel',
								data: {
									id: this.data.id
								},
								success: res => {
									res = res.res;
									if (res.code === 1) {
										uni.redirectTo({
											url:'/pages/new/find/list'
										})
									}
								}
							});
						}
					}
				});
				
			} else {
				this.$wanlshop.to('/pages/user/auth/auth');
			}
		},
	}
}
</script>

<style>
page{
	background-color: #ffffff;
}	
</style>


<style scoped lang="scss">
.search-icon{
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
}

.swiper-box {
    position: relative;
    background-color: #f7f7f7;
    width: 100%;
    height: 100vw;
}
.swiper-box swiper {
	width: 100%;
	height: 100vw;
}

.swiper-box swiper swiper-item image {
	width: 100%;
	height: 100vw;
}

.swiper-box .indicator {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 25upx;
	height: 40upx;
	border-radius: 40upx;
	font-size: 22upx;
	position: absolute;
	bottom: 20upx;
	right: 20upx;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.2);
}

.gray-dark {
    color: #666666;
}

.padding-lr-bj {
    padding-left: 26rpx;
    padding-right: 26rpx;
}

.padding-top-sm {
    padding-top: 20rpx;
}
.margin-left-bj{
	margin-left: 26rpx;
}

.avatar{
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
}

.padding-bj {
    padding: 26rpx;
}

.gray{
	color: #828282;
}

.my-modal {
   position: relative;
   min-height: 500rpx;
   max-height: 1200rpx;
   padding-bottom: 128rpx;
   padding-bottom: calc(118rpx + env(safe-area-inset-bottom));
}

.my-modal .head {
	display: flex;
	position: relative;
	align-items: center;
}

.my-modal .head .content {
	display: flex;
	justify-content: center;
	width: 100%;
}

.padding-bottom-bj {
	padding-bottom: 25rpx;
}

.right{
	position: absolute;
	right: 20rpx;
}
.comment{
	width: 30rpx;
	height: 30rpx;
}
</style>